<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 搜索区 -->
        <el-row type="flex" justify="around">
          <el-col>
            <el-button type="primary" size="small" @click="tianjia">添加页面</el-button>

          </el-col>

          <el-col>
            <el-row type="flex" justify="end">
              <el-input v-model="pag.title_contains" placeholder="请输入关键字" style="width:300px" />
              <el-button @click="saixuan">筛选</el-button>

            </el-row>
          </el-col>

        </el-row>

        <hr>

        <!-- 内容区 -->
        <el-table

          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column prop="title" label="标题" />
          <!-- style="overflow-y:scroll; " -->
          <!-- cellspacing="0" border="1" cellpadding="5" style="overflow: scroll;word-break: keep-all" -->
          <el-table-column prop="content" label="内容">

            <template #default="{row}">
              <div class="mytable" v-html="row.content" />
            </template>
          </el-table-column>
          <!-- #default="{ data }" -->
          <el-table-column
            #default="{row}"
            prop="address"
            label="操作"
          >
            <el-button type="primary" size="small" @click="bianji(row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="btndel(row.id)">删除</el-button>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60">
          <!-- current-change 控制页码改变 -->
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="pag._limit"
            :current-page="pageIndex"
            @current-change="currentChange"
          />
        </el-row>

        <!-- 弹窗 -->
        <el-dialog
          :title=" roleId ?'编辑页面':'添加页面'"
          :visible="isShow"
          @close="btnCan"
        >
          <!-- 编辑回显的地方 -->
          <!-- <span>这是一段信息</span> -->
          <el-form ref="perFrom" :rules="rules" :model="dataform">

            <el-form-item prop="title" label="标题">
              <el-input v-model="dataform.title" />
            </el-form-item>

            <!-- 富文本 -->
            <el-form-item label="内容" prop="content">

              <VueEditor
                ref="vueEditor"
                v-model="dataform.content"
                :config="config"
              />
            </el-form-item>
          <!-- <VueEditor v-model="dataform.content" :config="config" /> -->

          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="btnOk">确 定</el-button>
            <el-button @click="btnCan">取 消</el-button>

          </span>
        </el-dialog>

      </el-card>
    </div>
  </div>

</template>

<script>
// 获取数据
import { gettable, getdata, deldata, updata, addData, getCount } from '@/api/content'
// 富文本
import VueEditor from 'vue-word-editor'
import 'quill/dist/quill.snow.css'

export default {
  components: { VueEditor },
  data() {
    return {
      text: '',
      roleId: '', // 存id
      getdata: [], // 回显
      tableData: [], // 获取要渲染数据

      // 弹窗
      isShow: false,

      dataform: {
        id: '',
        title: '',
        content: ''

      },
      rules: {
        title: [
          { required: true, message: '请填写标题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请填写内容', trigger: 'blur' }
        ]
      },
      // 富文本
      config: {
      // 上传图片的配置
        uploadImage: {
          url: 'http://localhost:8888/upload',
          name: 'file',
          // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
          uploadSuccess(res, insert) {
            insert('http://localhost:8888' + res.data.url)
          }
        },

        // 上传视频的配置
        uploadVideo: {
          url: 'http://localhost:3000/upload',
          name: 'file',
          uploadSuccess(res, insert) {
            insert('http://localhost:3000' + res.data.url)
          }
        }
      },
      // 分页的数据
      pageIndex: 1, // 当前页数
      total: 0, // 总数从数据渲染获取
      pag: {
        _start: 0,
        _limit: 2, // 当前数据显示的条数
        title_contains: ''
      }

    }
  },
  created() {
    this.getList()
    // addData()
    this.getCount()
  },
  methods: {
    // 实现翻页功能
    async getCount() {
      // const res = await getCount()
      // const res = await getCount(this.pag)
      // console.log('获取数据', res)

      // 得出数据总数
      const { data } = await getCount(this.pag)
      // console.log(data)
      this.total = data
    },

    // current-change 触发当前页时改变时触发
    currentChange(pageIndex) {
      //  开始的位置 = 最大条数 乘 点击页减一
      this.pag._start = this.pag._limit * (pageIndex - 1)
      // 点击触发页码数
      this.pageIndex = pageIndex
      // console.log(pageIndex)
      // 然后重新渲染
      this.getList()
    },

    // 第二个办法 filter

    // 筛选
    async saixuan() {
      // this.getList()// 渲染数据
      // this.getCount()// 更新页码
      this.pag._start = 0// 在搜索时,从0开始数据开始
      this.pageIndex = 1// 可以防止二次搜索时停留在原来页码

      // 获取全部数据
      const { data } = await gettable(this.pag)
      // console.log(data)
      this.tableData = data

      this.getCount(this.pag.title_contains)

      // this.text// 用户输入的筛选条件

      // console.log(this.text)// 用户输入的筛选条件

      // const arr = []// 存放筛选后的结果

      // // 获取全部数据
      // const { data } = await gettable()
      // console.log(data)

      // // 遍历所有数据

      // if (this.text) {
      //   data.filter(item => {
      //     if (item.title.indexOf(this.text) !== -1) {
      //       arr.push(item)
      //       console.log(arr)
      //     }
      //   })
      // }

      // // 如果输入为空时重新刷新
      // if (this.text === '') {
      //   this.getList()
      // } else {
      //   this.tableData = arr
      //   this.total = Math.round(arr.length / 2)
      //   // this.getCount()
      // }
      // // 搜索完清空
      // this.text = ''
      // return
    },
    // 渲染
    async getList() {
      // const res = await gettable()
      const { data } = await gettable(this.pag)
      // console.log(data)

      // 数据渲染
      this.tableData = data
      this.getCount()

      console.log('渲染的数据', data, '显示两条', data.length)

      // console.log(174, res)
    },

    // 删除键
    async btndel(id) {
      // 提示
      await this.$confirm('确认删除?')
      // 发送请求
      await deldata(id)

      this.$message.success('删除成功')
      // 更新页面
      this.getList()
    },

    // 编辑键 回显
    async bianji(id) {
      this.isShow = true
      this.roleId = id

      // const res = await getdata(id)
      // console.log('回显的数据', res)
      // //

      const { data } = await getdata(id)
      this.dataform = data

      // 富文本回显
      var quill = this.$refs.vueEditor.editor
      quill.clipboard.dangerouslyPasteHTML(0, `${this.dataform.content} `)

      //
      //
      // 试验品

      // // return
      // // console.log(this.$refs.vueEditor.editor.clipboard)
      // var quill = this.$refs.vueEditor.editor
      // console.log(
      //   quill.root
      // )
      // // this.$refs.vueEditor.editor.clipboard.dangerouslyPasteHHTML(0, this.dataform.content)
      // // const res = this.$refs.vueEditor.editor.root.innerHTML(this.dataform.content)

      // var res = this.$refs.vueEditor.editor
      // console.log(this.dataform)
      // res.clipboard.dangerouslyPasteHTML(0, this.dataform.content)
      // console.log('217', res)

      // // this.$refs.vueEditor.editor.clipboard.dangerouslyPasteHHTML(0, `<h2>hhhh</h2>`)
    },

    // 添加页面
    tianjia() {
      this.isShow = true
      this.dataform.title = ''
    },

    // 确定键
    async  btnOk() {
      // 判断是编辑信息还是新增信息
      if (this.dataform.id) {
        // 校验
        // await this.$refs.perFrom.validate()
        // 发送信息
        // var quill = this.$refs.vueEditor.editor
        // quill.root.innerHTML
        // const root = quill.clipboard.dangerouslyPasteHHTML(0, this.dataform.content)

        this.dataform.content = this.$refs.vueEditor.editor.root.innerHTML
        console.log(this.roleId, this.dataform.title, this.dataform.content)

        const { data } = await updata(this.dataform)
        console.log('更新数据:', data)

        // 提示信息
        this.$message.success('编辑成功')
        this.$refs.vueEditor.editor.root.innerHTML = ``
      } else {
        // 校验
        // await this.$refs.perFrom.validate()

        // 发送信息
        this.dataform.content = this.$refs.vueEditor.editor.root.innerHTML

        const { data } = await addData(this.dataform)

        // console.log(273, this.dataform)
        console.log(274, data)

        // 提示信息
        this.$message.success('添加成功')
      }
      // 更新页面
      this.getList()

      this.isShow = false
    },
    // 取消键
    async btnCan() {
      // this.$nextTick(() => {
      // })
      this.isShow = false

      setTimeout(() => {
        this.title = ''
        this.roleId = ''
        this.$refs.vueEditor.editor.root.innerHTML = ``
      }, 800)
    }

  }

}
</script>

<style lang="scss" scoped>

.mytable{
   height: 210px;
   overflow-x: inherit;
}
hr{
  margin: 20px 0;
}
</style>
